<!doctype html>
<html lang="zh-cn">
<head>
{% include "tdm_include_head_template.html" %}

<script type="text/javascript">
//var a = [{"data": [[1435124837849, 157], [1435124970403, 153]], "name": "procnr"}];

function draw_spline_flot(data, flot_id, item_list) {
  var flot_content = [];
  for (var i in item_list) {
    var flot_data = [];
    $.each(data, function(j, ctmlog) {
      flot_data.push([ctmlog.log_tm.$date, ctmlog[item_list[i]]]);
    });
    flot_content.push({"data":flot_data, "name":item_list[i]});
  }
  //console.log(flot_content);
  spline_show(flot_id, flot_content);
}

function draw_column_flot(data, flot_id, item_list) {
  var flot_content = [];
  for (var i in item_list) {
    var flot_data = [];
    var show_data = 0;
    $.each(data, function(j, ctmlog) {
      if (typeof(ctmlog[item_list[i]]) == 'boolean') {
        if (ctmlog[item_list[i]]) { show_data = 1; } else { show_data = 0; }
        flot_data.push([ctmlog.log_tm.$date, show_data]);
      } else {
        flot_data.push([ctmlog.log_tm.$date, ctmlog[item_list[i]]]);
      }
    });
    flot_content.push({"data":flot_data, "name":item_list[i]});
  }
  //console.log(flot_content);
  column_show(flot_id, flot_content);
}

function draw_spline_stockchart(data, flot_id, item_list) {
  var flot_content = [];
  for (var i in item_list) {
    var flot_data = [];
    $.each(data, function(j, ctmlog) {
      if (typeof(ctmlog[item_list[i]]) == 'boolean') {
        if (ctmlog[item_list[i]]) { show_data = 1; } else { show_data = 0; }
        flot_data.push([ctmlog.log_tm.$date, show_data]);
      } else {
        flot_data.push([ctmlog.log_tm.$date, ctmlog[item_list[i]]]);
      }
    });
    flot_content.push({"data":flot_data, "name":item_list[i]});
  }
  //console.log(flot_content);

  $(flot_id).highcharts('StockChart', {
    yAxis: {
      labels: {formatter: function () {return (this.value > 0 ? ' + ' : '') + this.value + '%'; } },
      plotLines: [{value: 0, width: 2, color: 'silver'}]
    },
    //plotOptions: {series: {compare: 'percent'} },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> %<br/>',
        valueDecimals: 2
    },
    rangeSelector: {
        buttons: [
          { type: 'hour', count: 1, text: '1h' },
          { type: 'day', count: 1, text: '1D' },
          { type: 'week', count: 1, text: '1W' },
          { type: 'all', count: 1, text: 'All' }],
        selected: 1,
        inputEnabled: false
    },
    series: flot_content
  });
}

function draw_column_stockchart(data, flot_id, item_list) {
  var flot_content = [];
  for (var i in item_list) {
    var flot_data = [];
    $.each(data, function(j, ctmlog) {
      if (typeof(ctmlog[item_list[i]]) == 'boolean') {
        if (ctmlog[item_list[i]]) { show_data = 1; } else { show_data = 0; }
        flot_data.push([ctmlog.log_tm.$date, show_data]);
      } else {
        flot_data.push([ctmlog.log_tm.$date, ctmlog[item_list[i]]]);
      }
    });
    flot_content.push({"type":"column", "data":flot_data, "name":item_list[i]});
  }
  //console.log(flot_content);

  $(flot_id).highcharts('StockChart', {
    yAxis: {
      //labels: {formatter: function () {return (this.value > 0 ? ' + ' : '') + this.value + '%'; } },
      plotLines: [{value: 0, width: 2, color: 'silver'}]
    },
    xAxis: {
      minTickInterval: 30*60*1000
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
        valueDecimals: 2
    },
    rangeSelector: {
        buttons: [
          { type: 'hour', count: 1, text: '1h' },
          { type: 'day', count: 1, text: '1D' },
          { type: 'week', count: 1, text: '1W' },
          { type: 'all', count: 1, text: 'All' }],
        selected: 1,
        inputEnabled: false
    },              
    series: flot_content
  });
}
function refresh_ctmlog() {
  $.getJSON('/tdm/json/acard/venuesync/{{view_city.name}}/{{view_venue.name}}/{{view_ctmdev.devid}}/', function (data) {
    //draw_spline_flot(data, "#cpu_mem_disk_flot", ['cpu', 'memory', 'disk']);
    //draw_column_flot(data, "#app_port_live_flot", ['app_live', 'port_3306', 'port_9100']);
    //draw_column_flot(data, "#attend_num_flot", ['attend_num']);
    draw_spline_stockchart(data, "#cpu_mem_disk_flot", ['cpu', 'memory', 'disk']);
    draw_column_stockchart(data, "#app_port_live_flot", ['app_live', 'port_3306', 'port_9100']);
    draw_column_stockchart(data, "#attend_flot", ['attend', 'toattend']);
    console.log(data);
  });
}
$(function() {
  sidebar_nav_clone();
  refresh_ctmlog();
});
</script>
</head>

<body class=" theme-blue">
{% include "tdm_include_navbar_template.html" %}

<div class="sidebar-nav">
  <ul id="city_jxd">
  {% for city in city_all %}
  <li>
    <a href="#" data-target=".{{city.name}}-menu" class="nav-header collapsed" data-toggle="collapse" aria-expanded="false">
      <i class="fa fa-fw fa-bars"></i>
      {{city.name}}
      {% if city.warning_nr %}
      <span class="badge badge-warning">{{city.warning_nr}}</span>
      {% endif %}
      {% if city.alert_nr %}
      <span class="badge badge-danger">{{city.alert_nr}}</span>
      {% endif %}
      <i class="fa fa-collapse"></i>
    </a>
  </li>
  <li>
    <ul class="{{city.name}}-menu nav nav-list collapse {% ifequal view_city city.name %}in{% endifequal %}">
      {% for venue in city.venues %}
      <li>
        <a href="/tdm/acard/{{city.name}}/{{venue.name}}">
          <span class="fa fa-caret-right"></span>
          {{venue.name}}
          {% if venue.warning_nr %}
          <div class="pull-right">
            <span class="badge badge-warning">{{venue.warning_nr}}</span>
          </div>
          {% endif %}
          {% if venue.alert_nr %}
          <div class="pull-right">
            <span class="badge badge-danger">{{venue.alert_nr}}</span>
          </div>
          {% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
  </li>
  {% endfor %}
  </ul>
</div>

<div class="content">
  <div class="header">
    <ul class="nav nav-tabs">
      <li role="presentation"><a href="/tdm/acard/{{view_city.name}}/">{{view_city.name}}</a></li>
      <li role="presentation" class="active"><a href="#">{{view_venue.name}} / {{view_ctmdev.devid}}</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          设备 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
        {% for venue_name, ctmdev_id in venue_ctmdev_list %}
          <li><a href="/tdm/acard/{{view_city.name}}/{{venue_name}}/{{ctmdev_id}}">{{ctmdev_id}}</a></li>
        {% endfor %}
        </ul>
      </li>
    </ul>
  </div>
  <div class="item-content">
    <div class="row">

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="panel panel-default">
      <div id='cpu_mem_disk' class="panel-heading">CPU/内存/磁盘(状态) </div>
      <div id="page-stats" class="panel-body">
      <div id="content">
        <div id="cpu_mem_disk_flot" style="height: 300px; min-width: 400px"></div>
      </div>
      </div>
    </div> </div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="panel panel-default">
      <div id='app_port_live' class="panel-heading">应用程序/端口(状态)</div>
      <div id="page-stats" class="panel-body">
      <div id="content">
        <div id="app_port_live_flot" style="height: 300px; min-width: 300px"></div>
      </div>
      </div>
    </div> </div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="panel panel-default">
      <div id='attend_num' class="panel-heading">刷卡状态</div>
      <div id="page-stats" class="panel-body">
      <div id="content">
        <div id="attend_flot" style="height: 300px; min-width: 300px"></div>
      </div>
      </div>
    </div> </div>

    </div>

  {% include "tdm_include_footer_template.html" %}
  </div>
</div>
</body>
</html>
